import React, { useState, useEffect, useRef } from 'react';
import Icon from '../../Icon';
import openFilePreviewWindow from '../../FilePreviewWindow';
import './UploadArea.css';

const UploadArea = ({
  label,
  required = false,
  accept = '*/*',
  multiple = false,
  onUpload = () => {},
  initialFiles = [], // 初始文件列表（编辑模式下的已有文件）
  className = ''
}) => {
  const [isDragOver, setIsDragOver] = useState(false);
  const [uploadedFiles, setUploadedFiles] = useState([]);

  const handleDragOver = (e) => {
    e.preventDefault();
    setIsDragOver(true);
  };

  const handleDragLeave = (e) => {
    e.preventDefault();
    setIsDragOver(false);
  };

  const handleDrop = (e) => {
    e.preventDefault();
    setIsDragOver(false);
    
    const files = Array.from(e.dataTransfer.files);
    handleFiles(files);
  };

  const handleFileSelect = (e) => {
    const files = Array.from(e.target.files);
    handleFiles(files);
    // 清空 input 值，以便可以重复选择同一文件
    e.target.value = '';
  };

  const handleFiles = (files) => {
    // 过滤掉无效的文件
    const validFiles = files.filter(file => file && (file.name || file.fileName));
    if (validFiles.length === 0) return;
    
    // 根据 multiple 属性决定是追加还是替换
    if (multiple) {
      // 多文件模式：追加新文件到已有文件列表
      setUploadedFiles(prev => {
        // 检查是否已存在相同的文件（通过文件名判断）
        const existingFileNames = new Set(prev.map(f => f.name || f.fileName).filter(Boolean));
        const newValidFiles = validFiles.filter(f => {
          const fileName = f.name || f.fileName;
          return fileName && !existingFileNames.has(fileName);
        });
        
        if (newValidFiles.length === 0) {
          // 没有新文件，返回原列表
          return prev;
        }
        
        const updatedFiles = [...prev, ...newValidFiles];
        // 使用 setTimeout 确保在状态更新后调用，避免循环
        setTimeout(() => {
          onUpload(updatedFiles);
        }, 0);
        return updatedFiles;
      });
    } else {
      // 单文件模式：替换已有文件
      const newFiles = [validFiles[0]];
      setUploadedFiles(newFiles);
      setTimeout(() => {
        onUpload(newFiles);
      }, 0);
    }
  };

  const removeFile = (index) => {
    setUploadedFiles(prev => {
      const newFiles = prev.filter((_, i) => i !== index);
      setTimeout(() => {
        onUpload(newFiles);
      }, 0);
      return newFiles;
    });
  };

  // 清理无效文件的方法
  const cleanupInvalidFiles = () => {
    setUploadedFiles(prev => {
      const validFiles = prev.filter(file => file && (file.name || file.fileName));
      if (validFiles.length !== prev.length) {
        setTimeout(() => {
          onUpload(validFiles);
        }, 0);
        return validFiles;
      }
      return prev;
    });
  };

  const openFilePreview = async (file) => {
    // 如果是 File 对象，直接预览
    if (file instanceof File) {
      openFilePreviewWindow(file);
      return;
    }
    
    // 如果是已有文件对象（包含 fileName, recordType, recordId），需要先读取文件
    if (file.fileName && file.recordType && file.recordId && window.electronAPI && window.electronAPI.getFileBlob) {
      try {
        const fileInfo = await window.electronAPI.getFileBlob(file.recordType, file.recordId, file.fileName);
        if (fileInfo && fileInfo.toFile) {
          const fileObj = fileInfo.toFile();
          openFilePreviewWindow(fileObj);
        } else {
          console.error('无法获取文件数据');
          alert(`无法预览文件: ${file.name || file.fileName}`);
        }
      } catch (error) {
        console.error('预览文件失败:', error);
        alert(`无法预览文件: ${file.name || file.fileName}`);
      }
    } else {
      // 降级方案
      console.warn('文件对象格式不正确，无法预览');
      alert(`无法预览文件: ${file.name || file.fileName || '未知文件'}`);
    }
  };

  // 使用 ref 来跟踪是否是首次初始化
  const isInitializedRef = useRef(false);
  
  // 组件挂载时清理无效文件
  useEffect(() => {
    setUploadedFiles(prev => {
      const validFiles = prev.filter(file => file && (file.name || file.fileName));
      if (validFiles.length !== prev.length) {
        return validFiles;
      }
      return prev;
    });
  }, []);
  
  // 只在组件首次挂载或 initialFiles 首次传入时初始化
  useEffect(() => {
    if (!isInitializedRef.current && initialFiles) {
      isInitializedRef.current = true;
      if (initialFiles.length > 0) {
        setUploadedFiles(initialFiles);
        // 初始化时也调用 onUpload，但使用 setTimeout 避免循环
        setTimeout(() => {
          onUpload(initialFiles);
        }, 0);
      }
    }
  }, []); // 只在挂载时执行一次
  
  // 使用 ref 存储上一次 initialFiles 的序列化值，用于比较
  const prevInitialFilesStrRef = useRef('');
  
  // 当 initialFiles 改变时（编辑不同记录），更新文件列表
  // 但只在切换到不同记录时更新，避免覆盖用户上传的文件
  useEffect(() => {
    // 序列化 initialFiles 用于比较（只比较文件名，不比较对象引用）
    const currentFilesStr = JSON.stringify(
      (initialFiles || []).map(f => f.fileName || f.name).filter(Boolean).sort()
    );
    
    // 只有当文件名列表真正改变时才更新（不是对象引用改变）
    if (currentFilesStr !== prevInitialFilesStrRef.current && isInitializedRef.current) {
      prevInitialFilesStrRef.current = currentFilesStr;
      
      setUploadedFiles(prev => {
        // 检查当前文件列表中是否有用户新上传的文件（File 对象，且不在 initialFiles 中）
        const initialFileNames = new Set(
          (initialFiles || []).map(f => f.fileName || f.name).filter(Boolean)
        );
        const userFiles = prev.filter(f => {
          if (f instanceof File) {
            // 用户新上传的文件
            return !initialFileNames.has(f.name);
          }
          return false;
        });
        
        // 如果有用户上传的新文件，合并保留它们
        if (userFiles.length > 0 && initialFiles && initialFiles.length > 0) {
          const merged = [...initialFiles, ...userFiles];
          // 不在这里调用 onUpload，避免循环
          return merged;
        }
        
        // 如果没有用户上传的文件，或者 initialFiles 为空，使用新的 initialFiles
        return initialFiles || [];
      });
    }
  }, [initialFiles]);

  // 检查是否有文件
  const hasFiles = uploadedFiles.length > 0;

  return (
    <div className={`upload-area ${className}`}>
      <label className="upload-area__label">
        {label}
        {required && !hasFiles && <span className="upload-area__required">*</span>}
      </label>
      
      <div
        className={`upload-area__dropzone ${isDragOver ? 'upload-area__dropzone--dragover' : ''}`}
        onDragOver={handleDragOver}
        onDragLeave={handleDragLeave}
        onDrop={handleDrop}
        onClick={() => document.getElementById(`file-input-${label}`).click()}
      >
        <input
          id={`file-input-${label}`}
          type="file"
          accept={accept}
          multiple={multiple}
          onChange={handleFileSelect}
          className="upload-area__input"
          style={{ display: 'none' }}
        />
        
        <div className="upload-area__content">
          <div className="upload-area__icon">
            <Icon name="folder" size={48} />
          </div>
          <div className="upload-area__text">
            <div className="upload-area__primary">点击上传 / 拖拽到此区域</div>
            <div className="upload-area__secondary">
              {multiple ? '支持多个文件，单个文件最大10MB' : '支持单个文件，最大10MB'}
            </div>
          </div>
        </div>
      </div>
      
      {uploadedFiles.length > 0 && (
        <div className="upload-area__files">
          {uploadedFiles.map((file, index) => {
            // 安全检查，确保文件对象存在且有 name 或 fileName 属性
            if (!file || (!file.name && !file.fileName)) {
              return null;
            }
            
            return (
              <div key={index} className="upload-area__file">
                <div className="upload-area__file-info">
                  <span className="upload-area__file-name" onClick={() => openFilePreview(file)} style={{cursor:'pointer', textDecoration:'underline'}}>
                    {file.name || file.fileName || '未知文件'}
                  </span>
                  <span className="upload-area__file-size">
                    {file.size ? `${(file.size / 1024 / 1024).toFixed(2)} MB` : '已有文件'}
                  </span>
                </div>
                <button
                  type="button"
                  className="upload-area__remove-btn"
                  onClick={() => removeFile(index)}
                >
                  ×
                </button>
              </div>
            );
          })}
        </div>
      )}
    </div>
  );
};

export default UploadArea;
